<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台管理系统</title>
    <meta name="referrer" content="no-referrer" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4755950_cmhps6g8f.css"
    />
    <link rel="stylesheet" href="../style/common.css" />
    <style>
      main .list .item {
        height: 100px;
        padding: 5px 0;
        user-select: none;
      }

      main .list .item .text:nth-child(1) {
        width: 10%;
      }

      main .list .item .text:nth-child(2) {
        width: 15%;
      }

      main .list .item .text:nth-child(3) {
        width: 15%;
      }

      main .list .item .text:nth-child(4) {
        width: 15%;
      }

      main .list .item .text:nth-child(5) {
        width: 15%;
      }

      main .list .item .text:nth-child(6) {
        width: 30%;
      }

      main .list .item .img {
        width: 100px;
        height: 80px;
      }
    </style>
  </head>

  <body>
    <header class="bg-base flex aic pl-20">
      <h3 class="fff">果莱人才网后台管理系统</h3>
    </header>

    <main class="bg-fff" style="margin-left: 0">
      <div class="pl-30 mb-20 flex jc-sb pr-30">
        <span>查找职位</span>
        <!-- <span class="base cursor">添加</span> -->
      </div>
      <div class="ml-30 form fcc">
        <p class="item mt-10">
          <span>查找内容 </span>
          <input
            id="searchText"
            type="text"
            class="ml-10"
            placeholder="请输入您要查找的关键字"
          />
        </p>

        <p class="item ml-30 pl-25">
          <button id="submit" class="btn submit ml-30">查找</button>
        </p>
      </div>
      <div class="pl-30 mb-20 flex jc-sb pr-30">
        <span>职位列表</span>
      </div>
      <ul class="list"  style="min-width: 600px">
        <li class="item aic flex">
          <span class="text fcc">编号</span>
          <span class="text fcc">标题</span>
          <span class="text fcc">薪资</span>
          <span class="text fcc">公司名</span>
          <span class="text fcc">图片</span>
          <p class="text fg1 fcc">操作</p>
        </li>

        <div id="list">
            
        </div>
      </ul>
    </main>
    <script src="../js/jquery.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/common.js"></script>
    <script>
      var searchObj = {
        searchData() {
          $("#submit").click(function () {
            var searchText = $("#searchText").val();
            if(searchText == ""){
                alert("请输入搜索内容");
            }else{
                var url = `http://localhost:3000/apply?q=${searchText}`;
            axios
              .get(url)
              .then(function (res) {
                searchObj.render(res.data);
              })
              .catch(function (err) {
                console.log("查询失败", err);
              });
            } 
          });
        },
        render(list) {
          var htmlStr = "";
          list.forEach(function (item) {
            htmlStr += `
                <li class="item aic flex">
                 <span class="fcc text">${item.id}</span>
                <span class="fcc text">${item.workTitle}</span>
                <span class="fcc text">${item.price}</span>
                <span class="fcc text">${item.companyName}</span>
               
                <p class="fcc text"><img class="img"
                        src="${item.imgUrl}">
                </p>
                 <p class="fcc text fg1">
                    <button class="submit ml-5"><a class="fff" href="./edit.html?id=${item.id}">编辑</a></button>
                </p>
                `;
          });
          $("#list").html(htmlStr);
        },
      };
      searchObj.searchData();
    </script>
  </body>
</html>
